import React from 'react';
import { View, Image, Text, ScrollView } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { AtFloatLayout } from 'taro-ui';
import { sourceUrl } from '@/config';
import Imagelocation from '@/components/Imagelocation';
import Icon from '@/components/Icon';
import { customeColor } from '@/src/config';
import pBqTuancan from '@/images/common/bqTuancan.png';
import pZhekou from '@/images/common/zhekou.png';
import cartImg from '@/images/standBar/cart.png';
import 'taro-ui/dist/style/components/float-layout.scss';
import './index.scss';

const ShoppingCarList = ({
  isOpened,
  totalSelProNum,
  totalSelProMoney = 0,
  totalPrice = 0,
  minMoney,
  delivery = null,
  carProList,
  handleClose,
  handlePurchaseNum,
  handlePay,
}) => {
  return (
    <AtFloatLayout
      isOpened={isOpened}
      onClose={() => handleClose()}
      className="carFloatLayout"
      catchMove
    >
      <View className="theContent">
        <ScrollView className={'list ' + (Taro.$bottomHight ? 'mbh' : '')} scrollY>
          <View className="listTitle">已选商品</View>
          {carProList.length > 0 &&
            carProList.map((product, index) => (
              <View className="item" key={'theCarPro_' + product.id + '_' + index}>
                <View className="proPic">
                  <Imagelocation
                    className="proIcon"
                    src={
                      product.productReleaseImg.indexOf('http') === 0
                        ? product.productReleaseImg
                        : sourceUrl + product.productReleaseImg
                    }
                  />
                  {product.favouredType == 1 && <Image className="biaoqian" src={pBqTuancan} />}
                  {product.favouredType == 3 && <Image className="biaoqian zhekou" src={pZhekou} />}
                </View>

                <View className="info">
                  <View className="name">{product.productReleaseTitle || ''}</View>
                  <View className="gray">{product.optionSelStr || ''}</View>
                  {/* <View className="gray">
                    {typeof product.monthlySale !== 'undefined' && (
                      <View className="saleNum">
                        月售
                        <Text className="num">{product.monthlySale}</Text>件
                      </View>
                    )}
                    {product.favouredType == 3 && (
                      <>
                        <Text className="actDiscount">{product.discount}折</Text>
                        <Text className="actLimit">
                          {product.activityLimit == 0 ? '' : '限' + product.activityLimit + '份'}
                        </Text>
                      </>
                    )}
                  </View> */}
                  <View className="price">
                    <Text className="unit">¥</Text>
                    {product.price}
                    {product.favouredType == 3 && <Text className="cost">¥{product.cost}</Text>}
                  </View>
                </View>

                <View className="opArea">
                  <View className="opLine">
                    <Icon
                      name="a-icon_minus_huaban7fuben8"
                      size={40}
                      color={customeColor}
                      onClick={() => handlePurchaseNum('sub', product)}
                    />
                    <Text className="num">{product.num}</Text>
                    <Icon
                      name="icon_add"
                      size={40}
                      color={customeColor}
                      onClick={() => handlePurchaseNum('add', product)}
                    />
                  </View>
                </View>
              </View>
            ))}
        </ScrollView>

        <View className="bottom flex-column">
          <View className="bottomCtx flex-row--center">
            <View className="tab flex-column--center">
              <Image className="icon" src={cartImg} />
              <View className="name">购物车</View>
              {totalSelProNum > 0 && (
                <View
                  className={[
                    'gwcNum',
                    totalSelProNum > 9 && 'two',
                    totalSelProNum > 99 && 'three',
                  ].join(' ')}
                >
                  {totalSelProNum > 99 ? '99+' : totalSelProNum}
                </View>
              )}
            </View>

            <View className="feeArea flex-column-end">
              <View className="totalLine">
                <Text className="txt20">合计：</Text>
                <Text className="txt24 customePageStyle bold">¥</Text>
                <Text className="txt32 customePageStyle bold total">
                  {totalSelProMoney.toFixed(2)}
                </Text>
                {totalPrice > totalSelProMoney && (
                  <Text className="txt22 gray cheaper">{totalPrice.toFixed(2)}</Text>
                )}
              </View>
              <View className="sendLine txt20 black6">
                {delivery != null && delivery.isInDelivery > 0
                  ? delivery.isInDelivery == 2
                    ? '超出配送范围'
                    : delivery.fee > 0
                    ? '另需配送费¥' + delivery.fee
                    : '免配送费'
                  : ''}
              </View>
            </View>

            {totalSelProNum > 0 && totalPrice >= minMoney ? (
              <View
                className="btnPay flex-row-center-center customePageBackgroundStyle"
                onClick={handlePay}
              >
                去结算
              </View>
            ) : (
              <View className="btnPay unableBtn flex-row-center-center">¥{minMoney}起送</View>
            )}
          </View>
          {Taro.$bottomHight && <View className="bottomHt"></View>}
        </View>
      </View>
    </AtFloatLayout>
  );
};
export default ShoppingCarList;
